<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>流程查看</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="../../lib/bootstrap/css/bootstrap.min.css"   rel="stylesheet">
    <link href="../../css/main.css"   rel="stylesheet">
    <link href="../../css/koala.css"   rel="stylesheet">
    <style>
        .approval {
            width: 75%;
            margin: 10px auto;
        }
        .approval .panel-footer {
            padding-left: 90%;
        }
        .approval .panel-footer button {
            margin-right: 15px;
        }
        .approval .pass {
           float: left;
           width: 60px;
           margin-right: 20px;
           margin-left: 50px;
        }
        .approval .pass label {
            float: right;
            position: relative;
            top: 2px;
        }
        .approval .noPass {
            float: left;
            width: 72px;
        }
        .approval .noPass label {
            float: right;
            position: relative;
            top: 2px;
        }
        .approval .noPass:after {
            clear: both;
        }
        .approval .reson {
            clear: both;
            padding-top: 25px;
        }
        .approval .reson label {
            float: left;
            position: relative;
            top: 25px;
            padding-right: 15px;
        }
        .approval .reson textarea {
            float: left;
            width: 45%;
        }
        .approval .row {
            margin-bottom: 2px;
        }
        .approval .row .content {
            position: relative;
            top: 6px;
        }

    </style>
</head>
<body>
    <div class="panel panel-primary approval">
        <div class="panel-heading">
            <h3 class="panel-title">任务审批</h3>
        </div>
        <div class="panel-body">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">信息</h3>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal processDetail" role="form" id="processDetail">
                        <div class="form-group row">
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">流程类型:</label>
                                <div class="col-lg-8 content">
                                    请假
                                </div>
                            </div>
                            <div class="col-lg-6 form-group">

                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">请假人:</label>
                                <div class="col-lg-8 content">
                                        李某某
                                </div>
                            </div>
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">请假类型:</label>
                                <div class="col-lg-8 content">
                                    事假
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">开始日期:</label>
                                <div class="col-lg-8 content">
                                    2013-10-10  08:00:00
                                </div>
                            </div>
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">结束日期:</label>
                                <div class="col-lg-8 content">
                                    2013-10-12 17:30:00
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" >
                            <div class="col-lg-6 form-group">
                                <label class="col-lg-4 control-label">请假原因:</label>
                                <div class="col-lg-8 content">
                                    个人原因
                                </div>
                            </div>
                            <div class="col-lg-6"></div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">历史</h3>
                </div>
                <div class="panel-body">
                       历史
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">结果</h3>
                </div>
                <div class="panel-body">
                    <div class="pass">
                        <div class="radio"><span class="checked"><input type="radio" style="opacity: 0;" checked="true" name="approvalResult"></span></div>
                        <label class="control-label">通过</label>
                    </div>
                    <div class="reson">
                        <label class="control-label">原因:</label>
                        <textarea class="form-control" rows="3" id="form-description" disabled >同意申请
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" type="button" id="returnBtn">返回</button>
        </div>
    </div>
    <script type="text/javascript" src="../../lib/jquery.js"></script>
    <script type="text/javascript" src="../../lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/koala-ui.plugin.js" ></script>
    <script>
        $(function(){
            var  approvalResults = $('[name="approvalResult"]');
            approvalResults.on('click', function(){
                approvalResults.each(function(){
                    $(this).parent().removeClass('checked');
                });
                $(this).parent().addClass('checked');
            })
            $('#returnBtn').on('click', function(){
                window.close();
            })
        })
    </script>
</body>
</html>
